<template>
    <div class="demo-collapse">
        <el-collapse accordion>
            <el-collapse-item name="1">
                <template #title>&nbsp;&nbsp;
                    展开查询<el-icon class="header-icon">
                        <info-filled />
                    </el-icon>
                </template>
                <div>
                    <el-row :gutter="20" style="width: 1000px;margin-top: 30px;margin-left: 20px;">
                        <el-col :span="6">
                            <div class="grid-content ep-bg-purple" />
                            物料清单编码 <el-input v-model="form.itemManifestCode" style="width: 320px" />

                        </el-col>
                        <el-col :span="6" style="margin-left: 170px">
                            <div class="grid-content ep-bg-purple" />
                            物料清单版本<el-input v-model="form.itemManifestVersion" style="width: 320px" />

                        </el-col>

                        <el-col :span="6">
                            <div class="grid-content ep-bg-purple" />
                            <span style="margin-left: 120px">物料选择</span><el-select v-model="form.chooseId"
                                style="width: 320px;margin-left: 170px">
                                <el-option label="请选择" />
                                <el-option v-for="a in inventoryInfo" :label="a.chooseName" :value="a.chooseId" />
                            </el-select>
                        </el-col>

                        <el-col :span="6" style="margin-left: 1000px;">
                            <div class="grid-content ep-bg-purple" />
                            <el-button @click="resetForm()">重置</el-button>
                            <el-button type="primary" style="width: 100px;" @click="getlist()">查询</el-button>
                        </el-col>
                    </el-row>
                </div>
            </el-collapse-item>

        </el-collapse>
    </div>
    <div>
        <el-button @click="router.push({ name: 'BillMaterialsAdd' })">新增物料清单</el-button>
    </div>
    <el-table :data="list" style="width: 100%">
        <el-table-column prop="itemId" label="序号" />
        <el-table-column prop="itemManifestCode" label="物料清单编码" />
        <el-table-column prop="itemManifestVersion" label="物料清单版本" />
        <el-table-column prop="itemDesc" label="物料描述" />
        <el-table-column prop="itemUnit" label="单位" />
        <el-table-column prop="itemSpecs" label="规格" />
        <el-table-column prop="chooseId" label="物料名称">
            <template v-slot="scope">
                <span v-if="scope.row.chooseId == 1">棉花</span>
                <span v-else-if="scope.row.chooseId == 2">羊皮</span>
            </template>
        </el-table-column>
        <el-table-column prop="handleTime" label="创建时间">
            <template v-slot="scope">
                {{ scope.row.handleTime.substring(0, 10) }}
            </template>
        </el-table-column>

        <el-table-column prop="handle" label="创建人">

        </el-table-column>
        <el-table-column prop="itemState" label="状态">
            <template v-slot="scope">
                <span v-if="scope.row.itemState == 0">有效</span>
                <span v-else>无效</span>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const apiurlshow = import.meta.env.VITE_APP_API_URL_ProductionShow
import axios from 'axios'
const apiurls = import.meta.env.VITE_APP_API_URL_ProductionAdd;
const apiurl = import.meta.env.VITE_APP_API_URL_ProductionShow;
const form = reactive({
    itemManifestCode: "",
    itemManifestVersion: "",
    chooseId: ''
})
const router = useRouter()
//重置
const resetForm = () => {
    form.itemManifestCode = '',
        form.itemManifestVersion = '',
        form.chooseId = ''
    getlist()
}
//物料选择下拉框
const inventoryInfo = ref([])
const getinventoryInfo = () => {
    axios.post(apiurl+'/api/ShowMaterial/GetSelection', {}).then(res => {
        inventoryInfo.value = res.data.data
    })
}
const list = ref([])
const getlist = () => {
    axios.post(apiurl+'/api/ShowMaterial/GetItemManifestInfo', {
        itemManifestCode: form.itemManifestCode,
        itemManifestVersion: form.itemManifestVersion,
        chooseId: form.chooseId || 0
    }).then(res => {
        list.value = res.data.data
    })
}

onMounted(() => {
    getinventoryInfo()
    getlist()
})
</script>